<template>
	<view class="fill-width" :class="$thatThemeClassName">
		<view class="flex-col align-center justify-center" style="padding: 50px;">
			<view class="imgUpload">
				<uv-upload
					:fileList="fileList"
					name="1"
					multiple
					:maxCount="10"
					accept="image"
					:previewImage="false"
					uploadText="选择图片"
					@afterRead="afterRead"
					class="uploadView"
				></uv-upload>
			</view>
			<view v-if="fileId.length > 0" class="fill-width" style="margin-top: 12px;">
				<uv-image :src="getImgUrl()" style="width: 100%;" class="uvimage">
				</uv-image>
			</view>
			<view class="fill-width flex-row align-center justify-center"
				style="gap:10px;margin-top: 20px;"
				v-if="fileId.length > 0"
			>
				<uv-button @click="send" type="success" text="分享"></uv-button>
				<uv-button @click="down" type="primary" text="下载"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { downImageByUrl } from '@/hooks/down'
	export default {
		props: {
			extFileId: {}
		},
		data() {
			return {
				fileList: [],
				fileId: ''
			}
		},
		watch:{
			extFileId: {
				handler(val){
					if(val){
						this.fileId = val
					}
				},

			}
		},
		methods: {
			getImgUrl(isDown = false){
				if(this.fileId?.length <= 0){
					return
				}
				if(this?.fileId?.startsWith('http')){
					return this.fileId
				}
				const path = isDown ? 'down' : 'preview'
				return this.$config.replacehUrl(`imgStore/imageTool/${path}?tempId=${this.fileId}`,true)
			},
			afterRead(event){
				const file = event?.file[0]
				this.fileId = ''
				this.$emit('afterRead',file)
			},
			send(){
				if(this.fileId?.length <= 0){
					return
				}
				const url = this.getImgUrl(true)
				// 分享的图片的链接
				wx.downloadFile({
				    url: url,
				    success: (res) => {
				      wx.showShareImageMenu({
				        path: res.tempFilePath
				      })
				    }
				})
			},
			async down(){
				if(this.fileId?.length <= 0){
					return
				}
				const url = this.getImgUrl(true)
				uni.showLoading({title: '下载中...',mask: true})
				await downImageByUrl(url)
				uni.hideLoading();
			},
		}
	}
</script>

<style scoped>
	.imgUpload{
		padding: 20px;
		border: 1px solid #e3e3e3;
		border-radius: 2px;
	}
	.uploadView{
		width: 80px;
	}
	.uvimage{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	:deep(.uv-upload__button){
		margin: 0 !important;
	}
</style>
